import { history } from 'umi';
import React from 'react';
import { Form, NavBar, Input, Button, Space, Radio } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import './withdraw.less';

const goBack = () => {
  history.back();
}

const goBill = () => {
  history.push('/bill');
}

type FieldType = { account?: string; loginMethod?: 'wechat' | 'alipay' }

export default function WithdrawPage() {
  const [form] = Form.useForm<FieldType>()
  const type = Form.useWatch('type', form)
  return (
    <div className='withdraw'>
      <NavBar title='余额提现' leftText='返回' rightText='资金明细' onClickLeft={goBack} onClickRight={goBill} />
      <div className='container'>
        <div className='withdraw-box'>
          <div className='withdraw-box-content'>
            <div className='balance-title'>我的余额</div>
            <div className='balance-num'>800.00</div>
          </div>
          <div className='withdraw-action'>
            <h4 className='withdraw-title'>提现金额</h4>
            <div className='withdraw-input'>
              <Input
                className='balance-input'
                type='number'
                prefix='¥'
                placeholder='请输入提现金额'
              />
            </div>
            <div className='withdraw-balance'>
              当前余额800.00元，<span className='withdraw-all'>全部提现</span>
            </div>
            <div className='withdraw-to'>
              <Form form={form}
                    initialValues={{
                      type: 'wechat',
                    }}
              >
                <Form.Item className='choose-withdraw-to' name='type'>
                  <Radio.Group>
                    <Space>
                      <span className='text'>提现到</span>
                      <Radio name='wechat' checkedColor='#43cf7c'>微信零钱</Radio>
                      <Radio name='alipay' checkedColor='#00bbee'>支付宝</Radio>
                    </Space>
                  </Radio.Group>
                </Form.Item>
                {type === 'alipay' && (
                  <Form.Item className='alipay-cell' name='alipayid' label='支付宝账号'>
                    <Input placeholder='请输入支付宝账号' />
                  </Form.Item>
                )}
                {type === 'alipay' && (
                  <Form.Item className='alipay-cell' name='alipayname' label='支付宝姓名'>
                    <Input placeholder='请输入支付宝真实姓名' />
                  </Form.Item>
                )}
              </Form>
            </div>
            <Button className='withdraw-btn' size='large' block>立即提现</Button>
          </div>
        </div>
      </div>
      <div className='container'>
        <div className='withdraw-tips'>
          温馨提示：提现申请提交后，需由客服进行审核，通常情况下会在2小时内处理。若未及时处理，您也可以联系客服微信进行催促，感谢您的理解！
        </div>
      </div>
      <SafeArea position='bottom' />
    </div>
  );
}
